<template>
  <div>
    <div class="relative flex h-20">
      <input
        autocomplete="no"
        @click="target[0] = 1"
        v-model="registerInfo.email"
        type="text"
        name="telephone"
        class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
      />
      <label
        class="
          text
          absolute
          w-20
          pointer-events-none
          left-2
          top-4
          duration-300
          transition-all
        "
        :class="[
          target[0] == 1 && registerInfo.email == ''
            ? 'top-4 importDaColor'
            : '',
          target[0] == 1 && registerInfo.email != ''
            ? 'myfont-1-importance importNoColor left-6'
            : '',
        ]"
        >请输入邮箱</label
      >
      <div class="relative">
        <div class="h-14 relative" style="line-height:56px;width:120px" @click="showEmail=!showEmail">
          <input disabled v-model="preEmail" class=" cursor-pointer" name="email" placeholder="请选择" />
          <label v-show="!showEmail" class=" absolute right-0"><i class=" iconfont icon-down"></i></label>
          <label v-show="showEmail" class=" absolute right-0"><i class=" iconfont icon-up"></i></label>
        </div>
        <div v-show="showEmail" class=" overflow-hidden rounded">
          <ul class="email animate__animated animate__fadeInDown">
            <li class=" select-none text-center text-gray-400">请选择</li>
            <li v-for="(item,index) in emailTypes" :key="index" @click="setEmail(item)">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="flex items-center">
    <div class="relative h-20">
      <input
        autocomplete="no"
        @click="target[1] = 1"
        v-model="registerInfo.code"
        type="text"
        name="telephone"
        class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
      />
      <label
        class="
          text
          absolute
          w-22
          pointer-events-none
          left-2
          top-4
          duration-300
          transition-all
        "
        :class="[
          target[1] == 1 && registerInfo.code == ''
            ? 'top-4 importDaColor'
            : '',
          target[1] == 1 && registerInfo.code != ''
            ? 'myfont-1-importance importNoColor left-6'
            : '',
        ]"
        >请输入验证码</label
      >
    </div>
    <div class="-mt-6">
      <button
        class=" transition-all duration-300 h-14 box-border bg-red-200 hover:bg-orange-500 text-white pl-5 pr-5 pt-3 pb-3"
      >
        获取验证码
      </button>
    </div>
  </div>
  <div>
    <div class="relative h-20">
      <input
        autocomplete="no"
        @click="target[2] = 1"
        v-model="registerInfo.password"
        type="password"
        name="telephone"
        class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
      />
      <label
        class="
          text
          absolute
          w-22
          pointer-events-none
          left-2
          top-4
          duration-300
          transition-all
        "
        :class="[
          target[2] == 1 && registerInfo.password == ''
            ? 'top-4 importDaColor'
            : '',
          target[2] == 1 && registerInfo.password != ''
            ? 'myfont-1-importance importNoColor left-6'
            : '',
        ]"
        >请输入密码</label
      >
    </div>
  </div>
  <div>
    <div class="relative h-20">
      <input
        autocomplete="no"
        @click="target[3] = 1"
        v-model="rePassword"
        type="password"
        name="telephone"
        class="w-72 h-14 pl-6 pr-6 pb-3 pt-7"
      />
      <label
        class="
          text
          absolute
          w-22
          pointer-events-none
          left-2
          top-4
          duration-300
          transition-all
        "
        :class="[
          target[3] == 1 && rePassword == '' ? 'top-4 importDaColor' : '',
          target[3] == 1 && rePassword != ''
            ? 'myfont-1-importance importNoColor left-6'
            : '',
        ]"
        >请再次输入密码</label
      >
      <div
        v-if="rePassword != '' && registerInfo.password != rePassword"
        class="text-red-700 text-xs mt-2"
      >
        两次输入的密码不一致
      </div>
    </div>
  </div>
  <div class="relative">
    <input
      id="registAgree"
      type="checkbox"
      v-model="isregistAgree"
      name="registAgree"
    />
    <label
      id="mylabel"
      for="registAgree"
      class="absolute left-2 cursor-pointer"
    ></label>
    <span class="text-gray-400 text-sm absolute w-96 left-7"
      >已阅读并同意xxx<span class="cursor-pointer text-black font-thin"
        >用户协议</span
      >和<span class="cursor-pointer text-black font-thin">隐私政策</span></span
    >
  </div>
  <div class="mt-7">
    <button
      class="text-white duration-300 transition-colors pt-4 pb-4 pl-32 pr-32"
      :class="isregistAgree ? ' bg-orange-500' : 'bgImportanceColor'"
    >
      登录
    </button>
  </div>
  <div class="w-72 mt-4">
    <span class="float-left cursor-pointer text-orange-500">忘记密码?</span>
    <span class="float-right cursor-pointer text-orange-500">邮箱登录</span>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive,Ref } from "vue";
const isregistAgree: boolean = ref(false);
const target: Array<number> = ref([0, 0, 0]);
const rePassword: string = ref("");
const registerInfo: Ref<object> = reactive({ email: "", password: "", code: "" });
let showEmail: boolean = ref(false);
let preEmail: Ref<string> = ref('')
let emailTypes: Array<string> = ref(['@qq.com','@163.com'])
function setEmail(emailType:string){
  preEmail.value = emailType;
  showEmail.value = !(showEmail.value);
}
</script>
<style scoped>
input[name="email"]{
  width: 120px !important;
}
input[name="email"]:focus {
  border: none !important;
  background-color: white !important;
  box-shadow: none !important;
}
.email > li:not(:first-child) {
  @apply pl-4 pr-4 pt-2 pb-2 bg-white cursor-pointer text-orange-500 text-center
}
.email > li:not(:first-child):hover {
  @apply bg-orange-500 text-white
}
#registAgree + label {
  border-color: #dddddd;
  border: 1px solid;
  @apply absolute  w-5 h-5  top-0 rounded-sm;
}
#registAgree:checked ~ label {
  border: none;
  @apply bg-orange-400;
}
#registAgree:checked + label::before {
  display: flex;
  content: "\2713";
  @apply items-start justify-center;
  font-size: 10px;
  color: white;
}
input[name="registAgree"] {
  border-color: #dddddd;
  background-color: #f9f9f9;
  visibility: hidden;
}
input[name="registAgree"]:checked {
  @apply bg-white;
}
#mylabel:hover {
  border: 1px solid rgba(249, 115, 22, 1);
}
input {
  background-color: #f9f9f9 !important;
  @apply text-black relative  border-gray-400;
}
input:focus {
  border: none;
  background-color: #fcf2f3 !important;
  border: 1px solid;
  outline: none;
  box-shadow: 0 0 0 2px rgb(255 92 0 / 20%);
  @apply border-red-500;
}
input[name="telephone"]:focus ~ .text {
  top: 0.25rem !important;
  @apply text-xs left-6 text-orange-500;
}
.importDaColor {
  color: rgba(249, 115, 22, 1) !important;
}
.importNoColor {
  color: rgba(161, 161, 171) !important;
}
.myfont-1-importance {
  top: 0.25rem;
  font-size: 12px;
}
.mytranslate-x {
  @apply translate-x-16;
}
#border {
  margin-left: -5px;
}
.bgImportanceColor {
  background-color: #ffcba9;
}
.animate__animated {
  animation-duration: 700ms;
}
</style>